<template>
    <div class="container">
        <div class="login-container">
            <div class="login-header">
                <h2 class="login-title">欢迎登录</h2>
            </div>
            <div>
                <el-tabs v-model="activeName" @tab-click="handleClick" class="custom-tabs">
                    <el-tab-pane label="账号登录" name="first">
                        <el-form ref="formRef" :model="form" :rules="rules" class="login-form">
                            <el-form-item prop="user" class="form-item">
                                <el-input v-model="form.user" placeholder="请输入用户名称" class="form-input"
                                    prefix-icon="User"></el-input>
                            </el-form-item>

                            <el-form-item prop="password" class="form-item">
                                <el-input v-model="form.password" type="password" placeholder="请输入登录密码"
                                    class="form-input" prefix-icon="Lock"></el-input>
                            </el-form-item>

                            <el-form-item class="form-actions">
                                <el-button type="primary" @click="submitForm" class="login-btn">
                                    登录
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <div class="forget-password" @click="handleRegister">
                            忘记密码
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="手机号登录" name="second">
                        <PhoneLogin />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import PhoneLogin from './Phone.vue';
import { useStore } from 'vuex';
import { key } from '../store/index';

const store = useStore(key);
const router = useRouter();
const form = reactive({
    user: '',
    password: ''
});
const activeName = ref('first');

// 表单验证规则
const rules = reactive({
    user: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ]
});

// 表单引用
const formRef = ref(null);

const handleRegister = () => {
    router.push('/register');
}
const handleClick = (tab, event) => {
    console.log(tab, event);
}

const submitForm = () => {
    if (formRef.value) {
        formRef.value.validate((valid) => {
            if (valid) {
                console.log('登录信息', form);
                // 登录逻辑
                store.dispatch('login'); // 使用Vuex登录
                router.push('/xuesheng');
            } else {
                console.log('登录失败，表单验证未通过');
                return false;
            }
        });
    }
}
</script>

<style scoped lang="scss">
/* 基础样式设置，使用rem单位 */
.container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
    /* padding: 1rem; */
}

.login-container {
    width: 100%;
    max-width: 25rem;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
    padding: 2.5rem 2rem;
    transition: transform 0.3s ease;
}

.login-container:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.forget-password{
    font-size: 0.8rem;
    color: #409eff;
    text-align: right;
    position: relative;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2329;
    margin-bottom: 0.5rem;
}

.login-form {
    width: 100%;
}

.form-item {
    margin-bottom: 1rem;
}

.form-input {
    width: 100%;
    height: 2.5rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: border-color 0.2s;
}

.form-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 0.125rem rgba(64, 158, 255, 0.2);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.login-btn,
.register-btn {
    width: 100%
}

.login-btn {
    background-color: #409eff;
    border-color: #409eff;
}

.login-btn:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.register-btn {
    background-color: #f0f2f5;
    color: #4e5969;
    border-color: #dcdfe6;
}

.register-btn:hover {
    background-color: #e9e9eb;
    color: #1f2329;
}
</style>
